<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/14
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>教师找回密码</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/teaLogin/css/style.css">


</head>

<script src="/js/jquery-3.3.1.js"></script>

<script>
    /*
        表单校验：
            1.用户名为学号：单词字符，长度9位
            2.密码：单词字符，长度8到20位
            3.email：邮件格式
            4.姓名：非空
            5.验证码：非空
     */

    //校验用户名
    //单词字符，长度8到20位
    function checkUsername() {
        //1.获取用户名值
        var username = $("#teacherNo").val();
        //2.定义正则
        var reg_username = /^\w{4}$/;

        //3.判断，给出提示信息
        var flag = reg_username.test(username);
        if(flag){
            //用户名合法
            $("#teacherNo").css("border","2px solid green");
            $("#NoSpan").css("color","green")
            $("#NoSpan").html("符合要求");
        }else{
            //用户名非法,加一个红色边框
            $("#teacherNo").css("border","2px solid red");
            $("#NoSpan").css("color","red")
            $("#NoSpan").html("请输入长度为4位数的工号");
        }

        return flag;
    }

    $(function () {
        //当表单提交时，调用所有的校验方法
        $("#forgetPwdForm").submit(function(){
            //1.发送数据到服务器
            if(checkUsername()){
                //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
                return true;
            }
            //2.不让页面跳转
            return false;
            //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
        });

        //当某一个组件失去焦点是，调用对应的校验方法
        $("#teacherNo").blur(checkUsername);

    });


</script>

<body>
<div class="container">
    <div class="info">
        <h1>教师忘记密码</h1><span>Made with <i class="fa fa-heart"></i> by HuangJiaLin</span>
    </div>
</div>
<div class="form">
    <div class="thumbnail"><img src="${pageContext.request.contextPath}/static/teaLogin/css/hat.svg"/></div>
    <form class="login-form" action="${pageContext.request.contextPath}/teacher/forgetPwd" method="get" id="forgetPwdForm">
        <input type="text" id="teacherNo" name="teacherNo" placeholder="工号"/>
        <button  type="submit">submit</button>
        <span style="color:red;">${forgetErrorMsg}</span>
        <span style="color:red;">${forgetRightMsg}</span>
        <p class="message">Remembered the password ! <a href="${pageContext.request.contextPath}/teacher/goLogin">Return to home page</a></p>
    </form>
</div>
<script src='${pageContext.request.contextPath}/static/teaLogin/js/jquery.min.js'></script>
<script  src="${pageContext.request.contextPath}/static/teaLogin/js/index.js"></script>

</body>
</html>

